<template>
  <div>
    <Head />

    <div class="main">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <keep-alive>
            <el-input v-model="form.title"></el-input>
          </keep-alive>
        </el-form-item>
        <el-form-item label="所属分类" prop="cate">
          <el-select v-model="form.cate" placeholder="请选所属分类">
            <el-option
              v-for="(item, index) in cateList"
              :key="index"
              :label="item.cate_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author"></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <div id="info"></div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="isSubmit"
            @click="onSubmit('form')"
            >立即发布</el-button
          >
          <el-button :loading="isSubmit" @click="resetForm('form')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import Head from "../components/Head.vue";
import E from "wangeditor";
import { getCate, addBlog } from "@/http/api/blog";
export default {
  components: { Head },
  data() {
    return {
      editor: null,
      isSubmit: false,
      form: {
        title: "",
        content: "",
        author: "",
        cate: "",
      },
      cateList: [],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        cate: [
          { required: true, message: "请选择所属分类", trigger: "change" },
        ],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getData();
  },
  beforeDestroy() {
    this.getContent();
    localStorage.setItem("addform", JSON.stringify(this.form));
  },
  mounted() {
    this.editor = new E("#info");
    this.editor.config.uploadImgShowBase64 = true;
    this.editor.create();

    this.form = JSON.parse(localStorage.getItem("addform"));
    this.editor.txt.html(this.form.content);
  },
  methods: {
    getContent() {
      this.isSubmit = true;
      this.form.content = this.editor.txt.html();
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.getContent();
          addBlog(this.form).then((res) => {
            if (res.code === 0) {
              this.$message({
                message: res.msg,
                duration: 2000,
                type: "success",
              });
              setTimeout(() => {
                this.$router.push({ name: "home" });
              }, 2001);
            }
            this.isSubmit = false;
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.content = "";
      this.editor.txt.clear();
    },
    getData() {
      getCate().then((res) => {
        if (res.code === 0) {
          this.cateList = [...res.data];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../theme/sytle.scss";
.main {
  width: $content_w;
  margin: 0 auto;
  margin-top: 25px;
}
</style>